<template>
    <div class="running-cubes" :style="styleSize"
         :class="{
                    'running-cube-style-blue': cubeStyle === 'blue',
                    'running-cube-style-golden': cubeStyle === 'golden',
                 }">

        <div class="container">
            <div v-for="count in 12" class="cube_wrap" :key="count">
                <div class="cube">
                    <div class="rotation">
                        <div v-for="cls in ['front', 'back', 'left', 'right', 'top', 'bottom']" :key="cls" class="wall"
                             :class="[cls]"></div>
                    </div>
                </div>
            </div>
            <div v-for="count in 150" class="square" :key="count"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RunningCubes",
        props: {
            cubeStyle: String,
            sizeWidth: Number,
            sizeHeight: Number
        },
        computed: {
            styleSize() {
                return "width: " + this.sizeWidth + "px; height: " + this.sizeHeight + "px;"
            }
        }
    }
</script>

<style lang="scss" scoped>
    // @formatter:off
    .running-cubes {
        &.running-cube-style-blue .wall { border: solid 3px #ADE1FE; }

        &.running-cube-style-golden .wall { border: solid 3px #E89E44; }

        position: absolute;
        transform-style: preserve-3d;
        overflow: hidden;

        div {
            transform-style: preserve-3d;
        }

        .container {
            width: 100%;
            height: 100%;
            transform: scale(0.5);
            margin-top: -20px;
        }

        /* cube style */
        @keyframes cube {
            0% { transform: translateX(-150vw); }
            100% { transform: translateX(150vw); }
        }
        @keyframes rotation {
            100% { transform: rotateX(360deg) rotateY(360deg); }
        }

        @for $i from 1 through 12 {
            $width-list: 10vw, 6vw, 4vw;
            $size: nth($width-list, random(3));
            .cube_wrap:nth-of-type(#{$i}) {
                position: absolute;
                top: calc(20% + percentage(calc(random(40) / 100)));
                left: calc(50% + (random(30) * 1px));
                width: $size;
                height: $size;
                animation: cube (30 + $i * 2) + s linear (0 - (30 - $i * 2)) + s infinite;
                opacity: 1;
                z-index: 99;
            }
            .cube_wrap:nth-of-type(#{$i}) .cube {
                position: absolute;
                width: 100%;
                height: 100%;
                animation: rotation (20 + random(20)) + s linear infinite;
            }
            .cube_wrap:nth-of-type(#{$i}) .rotation {
                position: absolute;
                width: 100%;
                height: 100%;
                transform: rotate(64deg);
            }
            .cube_wrap:nth-of-type(#{$i}) .wall {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            .cube_wrap:nth-of-type(#{$i}) .front {
                transform: translateZ(calc($size / 2));
            }
            .cube_wrap:nth-of-type(#{$i}) .back {
                transform: rotateY(180deg) translateZ(calc($size / 2));
            }
            .cube_wrap:nth-of-type(#{$i}) .left {
                transform: rotateY(90deg) translateZ(calc($size / 2));
            }
            .cube_wrap:nth-of-type(#{$i}) .right {
                transform: rotateY(-90deg) translateZ(calc($size / 2));
            }
            .cube_wrap:nth-of-type(#{$i}) .top {
                transform: rotateX(90deg) translateZ(calc($size / 2));
            }
            .cube_wrap:nth-of-type(#{$i}) .bottom {
                transform: rotateX(-90deg) translateZ(calc($size / 2));
            }
        }

        /* square style */
        @keyframes square {
            0% { transform: translateX(-120vw); }
            100% { transform: translateX(120vw); }
        }
        @for $i from 1 through 150 {
            .square:nth-of-type(#{$i}) {
                position: absolute;
                top: calc(20% + random(200) * 1px);
                left: calc(random(100) / 100);
                opacity: 0.3;
            }

            $color-list: #f9f9f9, #b0eaff;
            $color-theme: nth($color-list, random(2));
            .square:nth-of-type(#{$i}) {
                width: (1 + calc($i / 30)) * 1vw;
                height: (1 + calc($i / 30)) * 1vw;
                background-color: $color-theme;
                box-shadow: 0 0 8px $color-theme, 0 0 4px $color-theme, 0 0 4px $color-theme;
                animation: square (50 + random(10)) + s (0 - random(30)) + s infinite;
            }
        }
    }
    // @formatter:on
</style>